<template>
  <div id="order-detail-wrapper">
    <div class="content">
      <el-form ref="orderForm" :model="form" label-width="80px">
        <el-row style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <h3>订单抬头</h3>
          </el-col>
        </el-row>
        <el-row class="one-one" style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <el-form-item label="订单编号" prop="orderNumber">
              <el-input type="text" v-model="form.orderNumber" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单名称" prop="orderName">
              <el-input type="text" v-model="form.orderName" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单类型" prop="orderType">
              <el-input type="text" v-model="form.orderType" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="one-one" style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <el-form-item label="订单状态" prop="orderStatus">
              <el-input type="text" v-model="form.orderStatus" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="失效时间" prop="expirationTime">
              <el-date-picker v-model="form.expirationTime" type="datetime" placeholder="选择日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
        <el-row style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <h3>交易信息</h3>
          </el-col>
        </el-row>
        <el-row class="one-one" style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <el-form-item label="商家编号" prop="merchantNumber">
              <el-input type="text" v-model="form.merchantNumber" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商家名称" prop="merchantName">
              <el-input type="text" v-model="form.merchantName" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收款单位" prop="payee">
              <el-input type="text" v-model="form.payee" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="one-one" style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <el-form-item label="收款单位" prop="customerNumber">
              <el-input type="text" v-model="form.customerNumber" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customerName">
              <el-input type="text" v-model="form.customerName" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="缴费方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
        <el-row style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <h3>站点信息</h3>
          </el-col>
        </el-row>
        <el-row class="one-one" style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <el-form-item label="站点编号" prop="siteNumber">
              <el-input type="text" v-model="form.siteNumber" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站点名称" prop="siteName">
              <el-input type="text" v-model="form.siteName" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发电户号" prop="powerGenerationAccountNumber">
              <el-input type="text" v-model="form.powerGenerationAccountNumber" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="one-one" style="margin: 20px 0 0 20px; ">
          <el-col :span="8">
            <el-form-item label="发电户名" prop="powerGenerationAccountName">
              <el-input type="text" v-model="form.powerGenerationAccountName" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站点类型" prop="siteType">
              <el-input type="text" v-model="form.siteType" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电压等级" prop="SiteVoltageLevel">
              <el-input type="text" v-model="form.SiteVoltageLevel" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="one-one" style="margin: 20px 0 0 20px;">
          <el-col :span="8">
            <el-form-item label="装机容量" prop="installedCapacity">
              <el-input type="text" v-model="form.installedCapacity" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="并网时间" prop="mergeTime">
              <el-input type="text" v-model="form.mergeTime" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="抄表例日" prop="copyDate">
              <el-input type="text" v-model="form.copyDate" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 补贴相关字段 -->
        <el-row class="one-one" style="margin: 20px 0 0 20px;">
          <el-col :span="8">
            <el-form-item label="补贴时长" prop="subsidyDuration">
              <el-input type="text" v-model="form.subsidyDuration" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="补贴起始日期" prop="subsidyStartDate">
              <el-input type="text" v-model="form.subsidyStartDate" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="补贴单价" prop="subsidyUnitPrice">
              <el-input type="text" v-model="form.subsidyUnitPrice" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 地址相关字段（两列） -->
        <el-row class="one-one" style="margin: 20px 0 0 20px;">
          <el-col :span="8">
            <el-form-item label="站点地址" prop="siteAddress">
              <el-input type="text" v-model="form.siteAddress" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经纬度" prop="longiAndLatitude">
              <el-input type="text" v-model="form.longiAndLatitude" style="width:180px" />
            </el-form-item>
          </el-col>
          <!-- 第三列留空（保持与上一行布局对齐） -->
          <el-col :span="8">
            <el-form-item label="详细地址" prop="detailedAddress">
              <el-input type="text" v-model="form.detailedAddress" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 详细地址（单列） -->
        <el-row class="one-one" style="margin: 20px 0 0 20px;">
          <el-col :span="8">
            <el-form-item label="详细地址" prop="detailedAddress">
              <el-input type="text" v-model="form.detailedAddress" style="width:180px" />
            </el-form-item>
          </el-col>
          <!-- 后两列留空（保持布局对齐） -->
          <el-col :span="8"></el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <hr />
        <!-- 合同信息区域 -->
        <el-row style="margin: 20px 0 0 20px;">
          <el-col :span="8">
            <h3>合同信息</h3>
          </el-col>
        </el-row>
        <el-row class="one-one" style="margin: 20px 0 0 20px;">
          <el-col :span="8">
            <el-form-item label="合同编号" prop="contractNumber">
              <el-input type="text" v-model="form.contractNumber" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同名称" prop="contractName">
              <el-input type="text" v-model="form.contractName" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="合同有效期" prop="contractValidity" label-width="120px">
              <el-date-picker v-model="form.contractValidity" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="one-one" style="margin: 20px 0 0 20px;">
          <el-col :span="8">
            <el-form-item label="项目编号" prop="projectNumber">
              <el-input type="text" v-model="form.projectNumber" style="width:180px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称" prop="projectName">
              <el-input type="text" v-model="form.projectName" style="width:180px" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="one-one" style="margin: 20px 0 0 20px;">
          <el-col :span="8">
            <el-form-item label="附件" prop="attachment">
              <el-upload action="/upload" :show-file-list="true" accept=".pdf,.doc,.docx" style="width:180px">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
      </el-form>
      <div class="submit">
        <el-button type="primary" size="large">提交</el-button>
        <el-button size="large">清空</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const options: { label: string, value: string }[] = [
  {
    label: '支付宝',
    value: 'alipay'
  },
  {
    label: '微信',
    value: 'wechat'
  }
]
const form = reactive({
  orderNumber: '',
  orderName: '',
  orderType: '',
  orderStatus: '',
  expirationTime: '',

  merchantNumber: '',
  merchantName: '',
  payee: '',
  customerNumber: '',
  customerName: '',
  paymentMethod: '',

  siteNumber: '',
  siteName: '',
  powerGenerationAccountNumber: '',
  powerGenerationAccountName: '',
  siteType: '',
  SiteVoltageLevel: '',
  installedCapacity: '',
  mergeTime: '',
  copyDate: '',
  subsidyDuration: '',
  subsidyStartDate: '',
  subsidyUnitPrice: '',
  siteAddress: '',
  longiAndLatitude: '',
  detailedAddress: '',

  contractNumber: '',
  contractName: '',
  contractValidity: '',
  projectNumber: '',
  projectName: '',
  attachment: '',
})

</script>
<style lang="scss" scoped>
#order-detail-wrapper {
  display: flex;
  justify-content: center;
  /* 水平方向居中 */
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: lightcoral;

  .content {
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px 0 0 30px;
    overflow-y: scroll;
    .one {
      width: calc(100% - 20px);
      height: 120px;
      margin-top: 20px;

      h3 {
        margin-left: 10px;
      }

      .one-one {
        margin-top: 20px;
        margin-left: 30px;
      }
    }

    .two {
      width: calc(100% - 20px);
      height: 120px;

      h3 {
        margin-left: 10px;
      }

      .one-one {
        margin-top: 20px;
        margin-left: 30px;
      }
    }

    .three {
      width: calc(100% - 20px);
      height: 260px;

      h3 {
        margin-left: 10px;
      }

      .one-one {
        margin-top: 20px;
        margin-left: 30px;
      }
    }

    .four {
      width: calc(100% - 20px);
      height: 190px;

      h3 {
        margin-left: 10px;
      }

      .one-one {
        margin-top: 20px;
        margin-left: 30px;
      }
    }

    .submit {
      position: sticky;
      margin-top: 50px;
      text-align: center;
      bottom: 0;
    }
  }
}

hr {
  width: 98%;
  margin-top: 20px;
  height: 2px;
  background-color: #ff6b6b;
}

:deep(.el-form-item__label) {
  font-weight: bold; 
}
</style>